<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#box{
			width: 400px;
			height: 300px;
			border: 1px solid red;
			overflow: scroll;
		}
	</style>
	<script>
		window.onload= function () {
			box = document.getElementById('box');
			in_text = document.getElementById('in_text');
			btn = document.getElementById('btn');
			clear = document.getElementById('clear');

			btn.onclick= function () {
				text = in_text.value;
				now = new Date();
				text = "<p>"+now.getHours()+':'+now.getMinutes()+":"+now.getSeconds()+":"+text+"</p>"
				box.innerHTML = box.innerHTML + text;
			}
			clear.onclick = function () {
				box.innerHTML = '';
			}
		}
	</script>
</head>
<body>
	<div id="box">
		
	</div>
	<input type="text" id="in_text">
	<input type="button" value="发送" id="btn">
	<input type="button" value="清屏" id="clear">
</body>
</html>